<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣豆品</title>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/market.css">
    <link rel="stylesheet" href="css/swiper-bundle.css">
    <link rel="shortcut icon" href="img/market.ico" type="image/x-icon">
    <script src="js/jquery-3.6.0.min.js"></script>
</head>

<body>
    <a name="content"></a>
    <!-- 顶部导航栏 -->
    <div class="top nav row">
        <div class="col-8">
            <ul>
                <li><a href="">豆瓣</a></li>
                <li><a href="">读书</a></li>
                <li><a href="">电影</a></li>
                <li><a href="">音乐</a></li>
                <li><a href="">同城</a></li>
                <li><a href="">小组</a></li>
                <li><a href="">阅读</a></li>
                <li><a href="">FM</a></li>
                <li><a href="">时间</a></li>
                <li><a href="">豆品</a></li>
            </ul>
        </div>
        <div class="col-4">
            <ul>
                <li class="download"><a href="">下载豆瓣客户端</a></li>
                <li><a href="">登录/注册</a></li>
            </ul>
        </div>
    </div>
    <div class="download2">
        <div>豆瓣</div>
        <div></div>
        <div>
            <a href="">iPhone</a> ·
            <a href="">Aodroid</a>
        </div>
    </div>
    <script src="js/download.js"></script>

    <!-- 主页导航 -->
    <div class="main nav row">
        <div class="col-1"></div>
        <div class="col-2">
            <h1>豆瓣豆品</h1>
        </div>
        <div class="col-6">
            <ul>
                <li><a href="">全部商品</a></li>
                <li><a href="">豆瓣经典</a></li>
                <li><a href="">家居生活</a></li>
                <li><a href="">外出旅行</a></li>
                <li><a href="">文具小物</a></li>
            </ul>
        </div>
        <div class="col-2">
            <div>
                <img src="img/icon1.svg" alt="">
                <a href="" class="user">个人中心</a>
            </div>
            <ul class="user">
                <li class="items">豆品／纸书订单</li>
                <li class="items">我的优惠券</li>
                <li class="items">我的会员</li>
                <li class="items">收货地址管理</li>
            </ul>
        </div>
        <div class="col-1"></div>
    </div>
    <script src="js/user.js"></script>

    <!-- 主轮播图 -->
    <div class="swiper row">
        <div class="col-12 p-0">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./img/swip1.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./img/swip2.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./img/swip3.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./img/swip4.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./img/swip5.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./img/swip6.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./img/swip7.jpg" alt=""></div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>

    <!-- Swiper JS -->
    <script src="js/swiper-bundle.js"></script>
    <script src="js/swipe1.js"></script>
    <!-- 返回顶部 -->
    <div class="topBeturn">
        <ul>
            <li class="to1"><a href="#content" class="bet"></a></li>
            <li class="to2"><a href=""></a></li>
            <li class="to3"><a href=""></a></li>
            <li class="to4"><a href=""></a></li>
        </ul>    
    </div>
    <div class="topBeturn2">
        <div class="too2">
        <ul>
            <li>在线客服: 豆品在线客服</li>
            <li>在线时间: 周一至周日 09:00 - 22:00</li>
            <li></li>
            <li>客服电话: 4008353331-5</li>
            <li>接线时间: 周一至周五 09:30 - 18:00</li>
        </ul>
        </div>
        <div class="too3">
            <ul>
                <li>豆瓣豆品</li>
                <li>@豆瓣豆品</li>
                <li>豆瓣豆品</li>
                <li><img src="img/douPin.png" alt=""></li>
            </ul>
        </div>
        <div class="too4">
            <ul>
                <li>分享到豆瓣</li>
                <li>@分享到微博</li>
                <li>分享到微信</li>
                <li><img src="img/douPin.png" alt=""></li>
            </ul>
        </div>
    </div>
    <script src="js/topBeturn.js"></script>
    

    <!-- 新品首发 -->
    <div class="n1 row">
        <div class="col-2"></div>
        <div class="col-8 ">
            <h1>新品首发</h1>
        </div>
        <div class="col-2"></div>
    </div>
    <div class="n2 row">
        <div class="col"></div>
        <div class="col-9">
            <div class="row">
                <div class="col-4">
                    <img src="img/newp1.jpg" alt="">
                    <div class="nn1">豆瓣年品2022</div>
                    <div class="nn2">书写新年心意<p>￥98</p>
                    </div>
                </div>
                <div class="col-4">
                    <img src="img/newp2.jpg" alt="">
                    <div class="nn1">豆瓣棒球帽</div>
                    <div class="nn2">当逗趣表情遇见棒球帽<p>￥99</p>
                    </div>
                </div>
                <div class="col-4">
                    <img src="img/newp3.jpg" alt="">
                    <div class="nn1">豆瓣中性笔</div>
                    <div class="nn2">为书写增添仪式感<p>￥29</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col"></div>
    </div>
    <div class="n3 row">
        <div class="col"></div>
        <div class="col-9">
            <img src="img/newp4.jpg" alt="">
        </div>
        <div class="col"></div>
    </div>
    <!-- 人气单品 -->
    <div class="popular1 row">
        <div class="col-2"></div>
        <div class="col-8 ">
            <h1>人气单品</h1>
        </div>
        <div class="col-2"></div>
    </div>
    <div class="popular2 row">
        <div class="col"></div>
        <div class="col-9">
            <div class="row">
                <div class="col-3">
                    <img src="img/popular1.jpg" alt="">
                    <div class="pp1">豆瓣电影日历2022</div>
                    <div class="pp2">每一天都值得被珍藏<p>￥99</p>
                    </div>
                </div>
                <div class="col-3">
                    <img src="img/popular2.jpg" alt="">
                    <div class="pp1">豆瓣读书周历2022</div>
                    <div class="pp2">每周推荐一位豆瓣高分作家<p>￥88</p>
                    </div>
                </div>
                <div class="col-3">
                    <img src="img/popular3.jpg" alt="">
                    <div class="pp1">豆猫电影手办 · 第二弹</div>
                    <div class="pp2">桌上电影世界再添新角色<p>￥59</p>
                    </div>
                </div>
                <div class="col-3">
                    <img src="img/popular4.jpg" alt="">
                    <div class="pp1">国家图书馆 x 豆瓣 读书香薰</div>
                    <div class="pp2">阅读时刻 沉醉其中<p>￥128</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col"></div>
    </div>
    <!-- 二级轮播图 -->
    <div class="swiper2 row">
        <div class="col"></div>
        <div class="col-9">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><p>豆猫来了</p><img src="img/swip8.jpg" alt=""></div>
                    <div class="swiper-slide"><p>豆瓣收藏系列</p><img src="img/swip9.jpg" alt=""></div>
                    <div class="swiper-slide"><p>豆瓣藏书票系列</p><img src="img/swip10.jpg" alt="">></div>
                    <div class="swiper-slide"><p>豆瓣经典艺术系列</p><img src="img/swip11.jpg" alt=""></div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="col"></div>
    </div>

    <!-- Swiper JS -->
    <script src="js/swiper-bundle.js"></script>
    <script src="js/swipe1.js"></script>

    <!-- 豆瓣经典 -->
    <div class="classic1 row">
        <div class="col"></div>
        <div class="col-9">豆瓣经典
            <span>口碑好物，匠心甄选</span>
            <a href="">查看更多 ></a>
        </div>
        <div class="col"></div>
    </div>
    <div class="classic2 row">
        <div class="col"></div>
        <div class="col-9">
            <div class="row">
                <div class="col-3">
                    <img src="img/classic1.jpg" alt="">
                    <div class="pp1">豆瓣读书周历2022</div>
                    <div class="pp2">每周推荐一位豆瓣高分作家<p>￥88</p>
                    </div>
                </div>
                <div class="col-3">
                    <img src="img/classic2.jpg" alt="">
                    <div class="pp1">豆瓣电影日历2022</div>
                    <div class="pp2">每一天都值得被珍藏<p>￥99</p>
                    </div>
                </div>
                <div class="col-3">
                    <img src="img/classic3.jpg" alt="">
                    <div class="pp1">豆瓣读书书签——莎士比亚系列</div>
                    <div class="pp2">读书可以让你忘记你的悲哀<p>￥35</p>
                    </div>
                </div>
                <div class="col-3">
                    <img src="img/classic4.jpg" alt="">
                    <div class="pp1">电影香薰</div>
                    <div class="pp2">迷人气息 致敬经典<p>￥119</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col"></div>
    </div>
    <!-- 家居生活 -->
    <div class="home1 row">
        <div class="col"></div>
        <div class="col-9">家居生活
            <span>追求品质，乐享生活</span>
            <a href="">查看更多 ></a>
        </div>
        <div class="col"></div>
    </div>
    <div class="home2 row">
        <div class="col"></div>
        <div class="col-9">
            <div class="row">
                <div class="col-3">
                    <img src="img/home1.jpg" alt="">
                    <div class="pp1">豆瓣年品2022</div>
                    <div class="pp2">书写新年心意<p>￥98</p>
                    </div>
                </div>
                <div class="col-3">
                    <img src="img/home2.jpg" alt="">
                    <div class="pp1">豆瓣 读书抱枕</div>
                    <div class="pp2">可以收纳书籍的抱枕<p>￥78</p>
                    </div>
                </div>
                <div class="col-3">
                    <img src="img/home3.jpg" alt="">
                    <div class="pp1">豆瓣艺术T恤</div>
                    <div class="pp2">大师之作 随身穿着<p>￥88</p>
                    </div>
                </div>
                <div class="col-3">
                    <img src="img/home4.jpg" alt="">
                    <div class="pp1">国家图书馆 x 豆瓣 读书香薰</div>
                    <div class="pp2">阅读时刻 沉醉其中<p>￥128</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col"></div>
    </div>
    <!-- 外出旅行 -->
    <div class="travel1 row">
        <div class="col"></div>
        <div class="col-9">外出旅行
            <span>实用贴心，探索世界</span>
            <a href="">查看更多 ></a>
        </div>
        <div class="col"></div>
    </div>
    <div class="travel2 row">
        <div class="col"></div>
        <div class="col-9">
            <div class="row">
                <div class="col-3">
                    <img src="img/travel1.jpg" alt="">
                    <div class="pp1">实用贴心，探索世界</div>
                    <div class="pp2">当逗趣表情遇见棒球帽<p>￥99</p>
                    </div>
                </div>
                <div class="col-3">
                    <img src="img/travel2.jpg" alt="">
                    <div class="pp1">豆瓣轻型阳伞</div>
                    <div class="pp2">诗意随行，晴天里的陪伴<p>￥128</p>
                    </div>
                </div>
                <div class="col-3">
                    <img src="img/travel3.jpg" alt="">
                    <div class="pp1">豆瓣逆向手表—多色款</div>
                    <div class="pp2">逆向也出彩<p>￥329</p>
                    </div>
                </div>
                <div class="col-3">
                    <img src="img/travel4.jpg" alt="">
                    <div class="pp1">豆瓣X飞跃帆布鞋</div>
                    <div class="pp2">搭得刚刚好<p>￥178</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col"></div>
    </div>
    <!-- 文具小物 -->
    <div class="stationery1 row">
        <div class="col"></div>
        <div class="col-9">文具小物
            <span>点滴思绪，自在书写</span>
            <a href="">查看更多 ></a>
        </div>
        <div class="col"></div>
    </div>
    <div class="stationery2 row">
        <div class="col"></div>
        <div class="col-9">
            <div class="row">
                <div class="col-3">
                    <img src="img/Stationery1.jpg" alt="">
                    <div class="pp1">豆瓣中性笔</div>
                    <div class="pp2">为书写增添仪式感<p>￥29</p>
                    </div>
                </div>
                <div class="col-3">
                    <img src="img/Stationery2.jpg" alt="">
                    <div class="pp1">豆瓣读书便签贴纸——阅读者系列</div>
                    <div class="pp2">标记读书日常<p>￥9</p>
                    </div>
                </div>
                <div class="col-3">
                    <img src="img/Stationery3.jpg" alt="">
                    <div class="pp1">豆猫电影手办 · 第二弹</div>
                    <div class="pp2">桌上电影世界再添新角色<p>￥59</p>
                    </div>
                </div>
                <div class="col-3">
                    <img src="img/Stationery4.jpg" alt="">
                    <div class="pp1">海错图套装</div>
                    <div class="pp2">“游”进三百年前的海洋世界<p>￥66</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col"></div>
    </div>
    <!-- 用户测评 -->
    <div class="user1 row">
        <div class="col"></div>
        <div class="col-9">用户测评</div>
        <div class="col"></div>
    </div>
    <div class="user2 row">
        <div class="col"></div>
        <div class="col-9">
            <div class="user3">
                <div class="us1 row">
                    <div class="col-5 im1 "><img src="img/user1.jpg" alt=""><p>阅读是一个孤独的但需要与世界联系</p><p>的行为。要是人能活在豆瓣构筑的世</p><p>界里多好呀。</p><p><img src="img/usericon1.jpg" alt="">路人Eita</p>
                    </div>
                    <div class="col-1"></div>
                    <div class="col-5 im2"><img src="img/user2.jpg" alt=""><p>除了大大的电影海报和可爱的手办,</p><p>这次最惊喜的是2022的手帐本！</p><p><img src="img/usericon2.jpg" alt="">被绵羊蒙了心</p>
                    </div>
                    <div class="col-1"></div>
                </div>
                <div class="us2 row">
                    <div class="col-5 im3"><img src="img/user3.jpg" alt=""><p>秋分收到豆瓣的爱，顺带添了一位猫</p><p>教父😺</p><p><img src="img/usericon3.jpg" alt="">短波台</p>
                    </div>
                    <div class="col-1"></div>
                    <div class="col-5 im4"><img src="img/user4.jpg" alt=""><p>btw今年的手办份量可真足，都能当</p><p>镇纸了。</p><p><img src="img/usericon4.jpg" alt="">乐客</p>
                    </div>
                    <div class="col-1"></div>
                </div>
                <div class="us3 row">
                    <div class="col-3 im5"><img src="img/user5.jpg" alt=""><p>打开礼盒是我喜欢的红蓝cp配色，和</p><p>去年的日历摆在一起是喜气洋洋的圣</p><p>诞配色，好喜欢这只小西服豆猫呀！</p><p><img src="img/usericon5.jpg" alt="">WWWwww</p>
                    </div>
                    <div class="col-1"></div>
                    <div class="col-5 im6"><img src="img/user6.jpg" alt=""><p>在日复一日的翻页中感受时间，而</p><p>“我要尽情享受生命的每一分钟。”</p><p><img src="img/usericon6.jpg" alt="">火柴果子</p>
                    </div>
                    <div class="col-1"></div>
                    <div class="col"></div>
                </div>
                <div class="us4 row">
                    <div class="col-3 im7"><img src="img/user7.jpg" alt=""><p>收到本命色的|豆瓣电影日历2022|啦</p><p>(ツ)</p><p><img src="img/usericon7.jpg" alt="">石坂绿</p>
                    </div>
                    <div class="col-1"></div>
                    <div class="col-5 im8"><img src="img/user8.jpg" alt=""><p>每年年底如果需要收藏日历的话可以</p><p>用礼盒装的钉子串起来，如果担心一</p><p>年后方可放哪儿，可以试试别在它身</p><p>后呦</p><p><img src="img/usericon8.jpg" alt="">Sissi大王</p>
                    </div>
                    <div class="col-1"></div>
                    <div class="col"></div>
                </div>
            </div>
        </div>
        <div class="col"></div>
    </div>
    <!-- 查看更多 -->
    <div class="more row">
        <div class="col"></div>
        <div class="col-9">
            <a href="" class="mm">查看更多</a>
        </div>
        <div class="col"></div>
    </div>
    <!-- 官方小组 -->
    <div class="group1 row">
        <div class="col"></div>
        <div class="col-9">官方小组
            <a href="" class="mm">查看更多小组讨论 ></a>
        </div>
        <div class="col"></div>
    </div>
    <div class="group2 row">
        <div class="col"></div>
        <div class="col-9">
            <a href=""><span>684</span>【申请已结束】一日三餐，一起吃饭：邀请各位爱晒猫的铲屎官免费试用新品「豆瓣猫咪餐具」<em>01-03</em></a></div>
        <div class="col"></div>
    </div>
    <div class="group3 row">
        <div class="col"></div>
        <div class="col-9"><a href=""><span>169</span>请开麦｜我们很想听听你的心声，期待豆瓣豆品出什么样的产品？<em>07-03</em></a>
        </div>
        <div class="col"></div>
    </div>
    <div class="group4 row">
        <div class="col"></div>
        <div class="col-9"><a href=""><span>12</span>会员中心上线了「豆瓣遇见你便利贴」，100积分即可兑换<em>03-04</em></a></div>
        <div class="col"></div>
    </div>
    <!-- 页脚 -->
    <div class="foot row">
        <div class="col"></div>
        <div class="col-9">
            <div class="foot-left">
                <span><img src="img/icon3.svg" alt=""></span>
                <p>©  北京豆瓣豆品文化有限公司北京豆瓣豆品文化有限公司</p>
                <p>营业执照 |</p>
                <p>出版物经营许可证</p>
            </div>
            <div class="foot-right">
                <span><img src="img/icon4.svg" alt="">购物说明</span>
                <span><img src="img/icon5.svg" alt="">意见反馈 </span>
                <span><img src="img/icon6.svg" alt="">商务合作</span>
            </div>
        </div>
        <div class="col"></div>
    </div>
</body>

</html>